<template>
  <div class="content">
    <HearderTop></HearderTop>
    <searchBox :backColor="backColor"></searchBox>
    <div class="box-width">
      <banner></banner>
      <div class="tips">
        <div class="box">
          <div class="box-f" v-for="(item, i) in tipsList" :key="i">
            <div class="left-img">
              <img :src="item.icon" alt="" />
            </div>
            <div class="right-text">
              <div class="text-a">{{ item.title }}</div>
              <div class="text-b">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
      <shopBox></shopBox>
      <el-backtop target=".content"></el-backtop>
      <div class="bottoms">我是有底线哒~</div>
    </div>
  </div>
</template>
<script>
import HearderTop from "@/views/home/components/HearderTop";
import searchBox from "@/views/home/components/search";
import banner from "@/views/home/components/banner";
import shopBox from "@/views/home/components/shopBox";
import { getBanners, gettenant } from "@/apis/shopHome/home";
export default {
  components: { HearderTop, banner, shopBox, searchBox },
  name: "home",

  data() {
    return {
      options: [],
      value1: [],
      value2: "",
      tipsList: [
        // {
        //   title: '质量保证',
        //   content: '经过国家级委员认证',
        //   icon: require("@/assets/images/quality.png")
        // },
        // {
        //   title: '品类齐全',
        //   content: '全球合作品牌1000多家',
        //   icon: require("@/assets/images/category.png")
        // },
        // {
        //   title: '优质服务',
        //   content: '诚信经营售后无忧',
        //   icon: require("@/assets/images/service.png")
        // }, {
        //     title: '安全交易',
        //     content: '加密支付安全无忧',
        //     icon: require("@/assets/images/security.png")
        // }, {
        //     title: '物流直达',
        //     content: '支持全球采购直达',
        //     icon: require("@/assets/images/logistics.png")
        // }
      ],
      backColor: true
    };
  },
  created() {
    gettenant()
      .then(res => {
        this.tipsList = res.data || [];
      })
      .catch(() => {});
  },
  mounted() {
    let domId = document.getElementById("designer-app");
    this.domId = domId;
    domId.addEventListener("scroll", this.activationScroll);
  },
  computed: {},
  methods: {
    activationScroll(event) {
      const scrollTop = event.target.scrollTop;
      if (scrollTop > 20) {
        this.backColor = false;
      } else if (scrollTop == 0) {
        this.backColor = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@use "@/assets/styles/mixin";

.content {
  padding-top: 50px;
  background: #f8fafb;

  .tips {
    padding: 0 20px;
    background: #f8fafb;

    .box {
      margin-top: 20px;
      height: 100px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      justify-content: space-around;
      background: #dbe2e8;
      box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
      border-radius: 10px 10px 0px 0px;

      .box-f {
        display: flex;
        cursor: pointer;
        align-items: center;

        .left-img {
          @include mixin.flex-center;
          width: 56px;
          height: 56px;
          background-color: #e8eef6;
          box-shadow: inset 4px 6px 4px 0 rgba(4, 24, 48, 0.3), inset -1px -1px 1px 0px #ffffff;
          border-radius: 32px;
          margin-right: 10px;
        }

        img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }

        .text-a {
          font-weight: 700;
          font-size: 14px;
          color: rgba(4, 24, 48, 0.6);
          line-height: 20px;
          margin-bottom: 10px;
        }

        .text-b {
          font-weight: 400;
          font-size: 12px;
          color: rgba(78, 89, 105, 0.6);
          line-height: 17px;
        }
      }
    }
  }

  .bottoms {
    display: flex;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: rgba(61, 61, 61, 0.3);
    line-height: 18px;
    padding: 50px 0 33px 0;
  }

  .el-select {
    z-index: 1 !important;
    /* 设置一个较低的 z-index 值 */
  }
}
</style>
